<!--
/* @license
 * Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>&lt;model-viewer&gt; Fidelity Tests</title>

  <style>
    body { margin: 0; }
    model-viewer { 
      --progress-bar-color: transparent;
    }
  </style>
</head>
<body>
  <renderer-harness id="harness">
    <span slot="title">&lt;model-viewer&gt;</span>
    <model-viewer id="modelViewer"
        slot="renderer"
        camera-controls
        interaction-prompt="none">
    </model-viewer>
  </renderer-harness>
  <script type="module" src="../../../dist/renderer-harness.js"></script>
  <script type="module" src="../../../../../node_modules/@google/model-viewer/dist/model-viewer.min.js"></script>
  <script type="module">
    customElements.get("model-viewer").minimumRenderScale = 1;
  </script>
  <script>
    const harness = document.getElementById('harness');
    const modelViewer = document.getElementById('modelViewer');
    harness.addEventListener('scenario-change', () => {
      const {scenario} = harness;
      modelViewer.addEventListener('poster-dismissed', () => {
        // Sometimes the screenshot is taken when the poster hasn't faded away. 
        // This is a temporary workaround so that the screenshot is taken two frames after the poster-dismissed event fires.
        // TODO(sun765): Remove this when the bug is fixed. 
        requestAnimationFrame(()=>{
          requestAnimationFrame(()=>{
            requestAnimationFrame(()=>{
              this.dispatchEvent(new CustomEvent('model-ready'));
            })
          })
        });
      }, {once: true});
      
      modelViewer.style.width = `${scenario.dimensions.width}px`;
      modelViewer.style.height = `${scenario.dimensions.height}px`;

      modelViewer.style.backgroundColor = "rgba(255,255,255,0)";

      modelViewer.src = scenario.model;

      modelViewer.environmentImage = scenario.lighting;
      modelViewer.skyboxImage = scenario.renderSkybox? scenario.lighting: null;

      const {theta, phi, radius} = scenario.orbit;
      modelViewer.minCameraOrbit = `auto auto ${radius}m`;
      modelViewer.maxCameraOrbit = `auto auto ${radius}m`;
      modelViewer.cameraOrbit = `${theta}deg ${phi}deg ${radius}m`;
      const {x, y, z} = scenario.target;
      modelViewer.cameraTarget = `${x}m ${y}m ${z}m`;
      modelViewer.maxFieldOfView = `${scenario.verticalFoV}deg`;
      modelViewer.minFieldOfView = `${scenario.verticalFoV}deg`;
      modelViewer.fieldOfView = `${scenario.verticalFoV}deg`;
    });
  </script>
</body>
</html>
